﻿<!DOCTYPE html>
<html>
<head>
    <title>Foursquare Helper for WebMatrix - Start Here</title>
    <link href="content/Site.css" rel="stylesheet" type="text/css" />
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
</head>
<body>
    <div class="container">
        <div class="header">
            <img src="content/images/webx-icon.png" alt="WebMatrix" />
            <img src="content/images/foursquare-logo.png" alt="Foursquare Logo" class="partnerLogo" />
            <h1>
                Microsoft WebMatrix Helpers</h1>
            <h2>
                Foursquare Helper - Start Here</h2>
        </div>
        <div class="content">
            <div class="navLinks">
                <a href="startHere.htm">Start Here</a> | <a href="reference.htm">Helper Reference</a>
            </div>
            <h3>
                Introduction</h3>
            <p>
                Microsoft WebMatrix provides an easy way to get started with web development, and
                together with new Razor syntax for ASP.NET Web Pages it includes everything you
                need to get your web site up, running and integrated with many other sites and networks,
                in a short period of time. The WebMatrix helpers are designed to make your life
                easier when creating web sites. They provide you a simple and consistent way of
                performing common web development tasks that otherwise would require a great deal
                of custom coding. With a few lines of code you should be able to secure your web
                site using membership, store information in Windows Azure Storage, integrate your
                site with Facebook, among others things.
            </p>
            <p>
                The <strong>Foursquare Helper</strong> for WebMatrix makes it simple to integrate
                Foursquare in your site. With a few lines of code you'll be able to show an "Add
                to My Foursquare" button or show any user's badges in your site.
            </p>
            <h3>
                Getting Started in 60 Seconds</h3>
            <p>
                The helper mainly consists of a <strong>Foursquare.cshtml</strong> file, that should
                be placed in the <strong>App_Code</strong> folder of your WebMatrix site, together
                with a Foursquare folder with pages for handling authentication. To use the helper
                follow these steps:</p>
            <div class="message info">
                <strong>Note:</strong> If you only need to use the Foursquare.GetFoursquareButton()
                method. You can avoid the following steps and call the method directly in your WebMatrix
                page.</div>
            <ol>
                <li>Make note of the <strong>Site URL</strong> where your Microsoft WebMatrix site is
                    running (click the Site workspace | Settings page).<br />
                    <img alt="Application Url" src="content/images/wm-mysite-settings.png" class="centeredImage" />
                </li>
                <li>If you haven't got an Foursquare account, <a href="https://foursquare.com/signup/">
                    sign up</a>. Login to Foursquare and browse to the <a href="https://foursquare.com/oauth/register">
                        OAuth Consumer Registration</a> page.</li>
                <li>In this page, set the Application Web Site value to <strong>http://localhost:[port]</strong>,
                    replacing the <em>[port]</em> placeholder with the port where your local WebMatrix
                    site is running.
                    <img src="content/images/oauth-registration.png" class="centeredImage" height="170px"
                        alt="OAuth consumer registration" />
                </li>
                <li>Then set the Callback Url to <strong>http://localhost:[port]/Foursquare/RequestToken</strong>,
                    replacing the <em>[port]</em> placeholder with the port where your local WebMatrix
                    site is running and click <strong>Register</strong>. Make note of the consumer key
                    and secret values obtained.
                    <img src="content/images/registered-consumers.png" class="centeredImage" height="200px"
                        alt="Registered consumers list" />
                </li>
                <li>Add the following line to the <strong>_AppStart.cshtml</strong> page of your WebMatrix
                    site (if the file does not already exist, create it in the root of the website),
                    replacing the placeholders your Foursquare consumer key and secret.
                    <pre class="code">
@{
    Foursquare.Initialize(consumerKey: "{consumer-key}", 
                            consumerSecret: "{consumer-secret}");
}</pre>
                </li>
                <li>In a <strong>Default.cshtml</strong> page of your site, add the following code to
                    display a user's Foursquare badges (replace the id by your user id if you want).
                    Notice that you need to login with Foursquare for accessing this information.
                    <pre class="code">
&lt;body&gt;
    ...        
    @if (Session["accessToken"] != null) {	
	  @Foursquare.GetBadgesWidget(Session["accessToken"].ToString(), userId: 13442)
    } else {
      &lt;div&gt;
            You're not logged in with Foursquare, login by clicking 
                    the following @Foursquare.GetLoginLink("link")
      &lt;/div&gt;
    }
    ...
&lt;/body&gt;   
</pre>
                </li>
            </ol>
            <h3>
                Running the Foursquare Helper Sample</h3>
            <p>
                Optionally, you can download a sample WebMatrix web site where you can see the helper
                in action, including a detailed description of how the authentication flow of the
                helper works. To download and run it with Microsoft WebMatrix, follow these steps:</p>
            <ol>
                <li>Download the sample site from the helper's <a href="http://foursquarehelper.codeplex.com">
                    Codeplex</a> site, Download section. Extract the contents and open the folder in
                    WebMatrix.</li>
                <li>Make sure that your web site is running in the same <strong>URL</strong> that you've
                    configured when registering your application in the <strong>OAuth Consumer Registration</strong>
                    page (e.g. http://localhost:[port]).<br />
                </li>
                <li>Configure your Foursquare consumer key and secret in the <strong>_AppStart.cshtml</strong>
                    page of the sample site.</li>
                <li>Run the sample! It contains code samples and examples of each feature provided by
                    the helper.</li>
            </ol>
            <h3>
                More Info</h3>
            <p>
                You can find more information about the Foursquare API in <a href="http://developer.foursquare.com/">
                    http://developer.foursquare.com/</a>.
            </p>
            <p>
                Learn more on WebMatrix, ASP.NET Web Pages and the Razor Syntax <a href="http://www.microsoft.com/web/webmatrix/learn/">
                    with the WebMatrix tutorials</a>.
            </p>
        </div>
        <ul class="footer">
            <li>We're always looking for <a href="mailto:webapp@microsoft.com">bugs, feedback and
                suggestions!</a></li>
            <li>&copy; 2010-2011 Microsoft Corporation. Powered by IIS Express.</li>
        </ul>
    </div>
</body>
</html>
